<template>
	<view class="zone">
		<Header title="往期记录"></Header>
		<view class="main">
			<scroll-view scroll-y @scrolltolower="scnextrecord" class="list">
				<block v-for="(item,index) in list">
					<view class="item">
						<image src="http://image.qxgm.site/tdz/img/assembly/mg-09.png" mode="widthFix" class="bg"></image>
						<view class="p1">
							<view>{{item.name}}</view>
							<view class="time">{{item.execute_time}}</view>
						</view>
						<view class="p2">我的排名:<text class="text1">{{item.rank_index ? '第'+item.rank_index+'名' : '未上榜'}}</text></view>
						<view class="p3">
							<view class="box1">获得奖励:<text class="text3">{{item.number}}</text></view>
							<view :class="[item.receive == 1 ? 'received' : 'receive' ]" @click="getLevel(item)">{{item.receive == 1 ? '已领取' : '领取'}}</view>
						</view>
						<view class="people2">
							<view class="name">昵称：{{item.rank[1].username}}</view>
							<image src="http://image.qxgm.site/tdz/img/assembly/mg-12.png" class="img" mode="widthFix"></image>
							<view class="mingci">第二名</view>
						</view>
						<view class="people1">
							<view class="name">昵称：{{item.rank[0].username}}</view>
							<image src="http://image.qxgm.site/tdz/img/assembly/mg-13.png" class="img" mode="widthFix"></image>
							<view class="mingci">第一名</view>
						</view>
						<view class="people3">
							<view class="name">昵称：{{item.rank[2].username}}</view>
							<image src="http://image.qxgm.site/tdz/img/assembly/mg-11.png" class="img" mode="widthFix"></image>
							<view class="mingci">第三名</view>
						</view>
					</view>
				</block>
                <view class="empty" v-if="list.length==0" style="color: #ffffff;">
                    <image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
                	暂无数据
                </view>
                <view class="more" style="color: #ffffff;" v-else>
                	{{loadText}}
                </view>
			</scroll-view>
		</view>

		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/active/3.png" mode="widthFix">
									</image>
								</view>
								<view class="toan">
									零钱*{{itemlist.number}}
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				obtain: false,
                page: 1,
                max_page: '',
                loadText: '没有更多了',
                itemlist:{}
			}
		},
		onLoad() {
            this.log()
		},
		methods: {
            getLevel(item){
                if(item.receive == 1){
                    this.$u.toast('您已领取过该奖励！')
                }else{
                    this.sxreceive(item.id)
                    this.itemlist = item
                } 
            },
            //领取
            async sxreceive(id){
                let res = await this.$http.index.sxreceive({
                    shengxian_id:id
                })
                if (res.code == 1) {             
                    
                    // 通过ID获取索引点击以后变为领取状态
                    let prizeIndex = this.list.findIndex(item => {
                    	return item.id === id
                    })
                    this.$set(this.list[prizeIndex], 'receive', 1)
                    this.obtain = true
                    
                }
            },
            //列表页
            async log(){
                let res = await this.$http.index.sxlog({
                    page:this.page                                                                  
                })
                if (res.code == 1) {
                    if (res.code == 1) {
                        this.list = [...this.list, ...res.data.data]
                        this.max_page = res.data.last_page
                        if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
                    } else {
                        this.$u.toast(res.msg)
                    } 
                }
            },
			scnextrecord() {
				if (this.page >= this.max_page) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page = ++this.page;
			    this.log()
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
	}

	.list {
		height: calc(100vh - 70px);

		.item {
			position: relative;
			margin-bottom: 10px;

			.bg {
				width: 100%;
			}

			.p1 {
				background: url(http://image.qxgm.site/tdz/img/assembly/mg-01.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 0px;
				left: 16px;
				padding: 12px 32px 14px 8px;
				box-sizing: border-box;

				.time {
					color: #CC33CC;
					font-size: 12px;
				}
			}

			.p2 {
				position: absolute;
				top: 15px;
				right: 25px;
				color: #ffffff;
				font-size: 16px;

				.text1 {
					color: #FFCC66;
				}

				.text2 {
					color: #FF3333;
				}
			}

			.p3 {
				background: url(http://image.qxgm.site/tdz/img/assembly/mg-03.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				bottom: 15px;
				left: 0px;
				right: 10px;
				text-align: center;
				padding: 5px 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.box1 {
					color: #ffffff;
					font-size: 18px;

					.text3 {
						color: #FFCC66;
					}
				}
			}
		}

		.people1 {
			position: absolute;
			top: 15%;
			left: 29%;
			width: 38%;
			text-align: center;
			color: #ffffff;
			font-size: 10px;

			.img {
				width: 100%;
			}

			.mingci {
				background: url(http://image.qxgm.site/tdz/img/assembly/mg-10.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				font-size: 10px;
				padding: 0px 6px 0 0px;
				box-sizing: border-box;
				width: 24px;
				height: 70px;
				top: 10px;
				right: 0;
			}
		}

		.people2 {
			position: absolute;
			top: 28%;
			left: 5%;
			width: 30%;
			text-align: center;
			color: #ffffff;
			font-size: 10px;

			.img {
				width: 100%;
			}

			.mingci {
				background: url(http://image.qxgm.site/tdz/img/assembly/mg-10.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				font-size: 10px;
				padding: 0px 6px 0 0px;
				box-sizing: border-box;
				width: 24px;
				height: 70px;
				top: 10px;
				right: 0;
			}
		}

		.people3 {
			position: absolute;
			top: 26%;
			right: 3%;
			width: 30%;
			text-align: center;
			color: #ffffff;
			font-size: 10px;

			.img {
				width: 100%;
			}

			.mingci {
				background: url(http://image.qxgm.site/tdz/img/assembly/mg-10.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				font-size: 10px;
				padding: 0px 6px 0 0px;
				box-sizing: border-box;
				width: 24px;
				height: 70px;
				top: 10px;
				right: 5px;
			}
		}
	}

	.getLevel {
		display: block;
		width: 70px;
		font-size: 16px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
		height: 35px;
		line-height: 35px;
	}
	
	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;
	
		.parts {
			width: 25%;
			box-sizing: border-box;
		}
	
		.sbimg {
			display: block;
			margin: 0 auto;
			width: 53%;
			padding: 4% 3%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}
	
		.tanimg {
			width: 100%;
		}
	
		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}
	
	}
	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
    
    .receive {
    	display: block;
    	width: 75px;
    	font-size: 13px;
    	height: 33px;
    	font-weight: normal;
    	text-align: center;
    	color: #f9e5b6;
    	line-height: 33px;
    	text-shadow: 0 1px 1px #CB6500;
    	background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
    	background-size: 100% 100%;
    }
    
    .received {
    	filter: grayscale(100%);
    	display: block;
    	width: 75px;
    	font-size: 13px;
    	height: 33px;
    	font-weight: normal;
    	text-align: center;
    	color: #f9e5b6;
    	line-height: 33px;
    	text-shadow: 0 1px 1px #CB6500;
    	background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
    	background-size: 100% 100%;
    }
</style>